<template>
  <div class="content">
    <el-card
      class="char_card"
      style="height: 500px; width: 500px"
      shadow="hover"
    >
      <div id="main"></div>
    </el-card>

    <el-card style="width: 500px" class="suppier_card" shadow="hover">
      <el-table :data="customer_numbers">
        <el-table-column prop="username" label="用户名" width="180">
        </el-table-column>

        <el-table-column prop="number" label="订购总量" width="180">
        </el-table-column>

        <el-table-column label="查看年度信息" width="80">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="selectYearlyOrder(scope.row.username)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination"
        background
        @current-change="handleCurrentChange"
        :current-page="currentPageNumber"
        :page-size="currentPageSize"
        layout="prev, pager, next"
        :total="100"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { selectAllCustomerData, selectYearlyOrder } from "../../api/admin";
export default {
  components: {},
  data() {
    return {
      customer_numbers: [],
      currentPageNumber: 1,
      currentPageSize: 5,
      option: {
        title: {
          text: "本年度用户订购信息",
          subtext: "Echarts实时统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["订购量"],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "订购量",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      },
    };
  },
  methods: {
    handleCurrentChange(value) {
      this.currentPageNumber = value;
      this.selectAllCustomerData();
    },
    async selectYearlyOrder(username) {
      await selectYearlyOrder(username)
        .then((res) => {
          let yearArr = res.data;
          this.option.series[0].data = yearArr;
          this.drawLine();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    drawLine() {
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(this.option);
    },
    async selectAllCustomerData() {
      await selectAllCustomerData(this.currentPageNumber, this.currentPageSize)
        .then((res) => {
          this.customer_numbers = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
  mounted() {
    // 1.首先查出所有客户以及对应关键信息
    this.selectAllCustomerData();
    this.drawLine();
  },
};
</script>
<style lang="scss">
.char_card {
  padding: 20px 0px;
  #main {
    height: 450px;
    width: 450px;
  }
}

.char_card,
.suppier_card {
  display: inline-block;
}
.char_card {
  padding: 20px 0px;
  margin: 0px 10px;
}

.suppier_card {
  padding: 20px 0px;
  height: 500px;
  width: 50%;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
@import "../../assets/css/global.scss";
</style>